<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>任务大厅</title>
    <link th:replace="~{public::layui}">
    <style>
        body {
            color: #38474d;
            font-size: 12px;
            line-height: 1.5;
            font-family: "微软雅黑","Microsoft Yahei";
            z-index: 0;
            position: relative;
        }
        .TABLE-TASK{
            width: 100%;
            max-width: 1260px;
            margin: 0 auto;
        }
        .TABLE-NAV{
            width:1260px;
            height:100px;
            background-color: white;
            /*固定定位*/
            position:fixed;
            top:0px;
            z-index: 1;
        }
        .TABLE-CONTENT{
            margin-top:100px;
        }
        .TABLE-CONTENT li {
            padding: 30px 20px 35px;
            margin-bottom: 15px;
            overflow: hidden;
            background-color: #f8f8f8;
            font-size: 13px;
            color: #38474d;
            line-height: 25px;
        }
        .TABLE-CONTENT h4{font-size: 18px;color: #389ec5;font-weight: normal;line-height: 27px;margin-bottom: 5px;}
        .TABLE-CONTENT h4 a{color: #389ec5;overflow: hidden;white-space: nowrap;word-wrap: normal;text-overflow: ellipsis;}
        .TABLE-CONTENT h4 a:hover{text-decoration: underline;}
        .TABLE-CONTENT .txt{float: left;width: 60%;}
        .TABLE-CONTENT .det{}
        .TABLE-CONTENT .det span{display: inline-block;margin-right: 20px;}
        .TABLE-CONTENT .tag{display: inline-block;line-height: 27px;vertical-align: middle;color: #fff;font-size: 13px;}
        .TABLE-CONTENT .tag span{display: inline-block;border-radius: 3px;padding: 0 10px;margin: 0 5px;background-color: #38474d;}
        .TABLE-CONTENT .info{float: right;text-align: right;}
        .TABLE-CONTENT .contact{display: inline-block;margin-right: 20px;}
        .TABLE-CONTENT .words{float: left;margin-right: 10px;}
    </style>
</head>
<body>
<div class="TABLE-TASK">
    <div class="TABLE-NAV">
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">任务名：</label>
                    <div class="layui-input-inline">
                        <input type="text" id="title" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">报酬：</label>
                    <div class="layui-input-inline">
                        <input type="number" id="reword" autocomplete="off" class="layui-input" placeholder="请输入最低报酬">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">任务类别：</label>
                    <div class="layui-input-inline">
                        <select id="type">
                            <option value=""></option>
                            <option value="1">生活</option>
                            <option value="2">技术</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">任务状态：</label>
                    <div class="layui-input-inline">
                        <select id="status">
                            <option value=""></option>
                            <option value="1">任务人数未满</option>
                            <option value="0">任务人数已满</option>
                        </select>
                    </div>
                </div>
                <div class="layui-input-inline btns" style="float: right">
                    <div class="layui-btn layui-btn-normal" id="search-form">搜索</div>
                </div>
            </div>
        </form>
    </div>
    <div class="TABLE-CONTENT">
        <ul class="TABLE-CONTENT">
            <button class="layui-btn" onclick="show()">详情</button>
        </ul>
    </div>
    <div id="page"></div>
</div>
<script>
    var $ = layui.jquery
    var laypage = layui.laypage
    var layer = layui.layer
    var laydate = layui.laydate
    var data = {}
    $(function (){
        findAll()
    })
    $("#search-form").click(function () {
        if ($("#title").val()!=""){
            data.title = $("#title").val()
        }else {
            console.log(1)
            data.title = null;
        }
        if ($("#reword").val()!=""){
            data.reword = parseInt($("#reword").val())
        }else {
            data.reword = null;
        }
        data.typeId = $("#type").val()
        if ($("#status").val()!=""){
            data.state = $("#status").val()
        }else {
            data.state = null;
        }
        data.page=1
        findAll();
    })
    laydate.render({
        elem: '.date'
    });
    function findAll(){
        $.ajax({
            url:'[[@{/task}]]'
            ,data
            ,dataType:'json'
            ,success(rs){
                if (rs.code == 0){
                    data.count = rs.count;
                    showTable(rs.data)
                    laypage.render({
                        elem: 'page'
                        ,limit: 4		//每页显示8条数据
                        ,count: data.count //数据总数，从服务端得到
                        ,curr: data.page
                        ,jump: function(obj, first){
                            data.page = obj.curr
                            //首次不执行
                            if(!first){
                                //do something
                                findAll();
                            }
                        }
                    });
                }else {
                    layer.msg("网络异常",{icon:5})
                }
            },error(e){
                layer.msg("网络异常",{icon:5})
            }
        })
    }
    function showTable(datas){
        let num = 0;
        let html= ''
        for (let data of datas) {
            let status = (data.state == true ? '任务发布中' : '任务已完成')
            html+= '<li>\n' +
                '                <h4><b>￥'+data.taskinfo.reword+"&emsp;"+data.taskinfo.title+'</p>\n' +
                '                    <div class="tag"><span>发布时间：'+moment(data.createTime).format('YYYY-MM-DD HH:mm:ss')+'</span><span>截止时间：'+moment(data.endTime).format('YYYY-MM-DD HH:mm:ss')+'</span></div>\n' +
                '                </h4>\n' +
                '                <div class="txt">\n' +
                '                    <div class="det">\n' +
                '                        <p>\n' +
                '                            <span>任务类型：'+data.taskType.name+'</span>\n' +
                '                            <span>任务状态：'+ status +'</span>\n' +
                '                        </p>\n' +
                '                        <p>此任务已经过校园官方审核。</p>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '                <div class="info">\n' +
                '                    <div class="words">\n' +
                '                        <span class="contact">联系方式：'+data.taskinfo.contact+'</span>\n' +
                '                        <p>人数 | 已报名：'+data.taskinfo.pickup+'人 | 上限：'+data.taskinfo.number+'人</p>\n' +
                '                    </div>\n' +
                '                    <button class="layui-btn layui-btn-primary layui-border-blue" onclick="showTask('+data.id+')">详情</button>\n' +
                '                </div>\n' +
                '            </li>';
        }
        $(".TABLE-CONTENT").html(html);
    }
    function showTask(id){
        layer.open({
            type:2
            ,title: '任务查看'
            ,area:["800px","500px"]
            ,moveType: 2
            ,content:'[[@{/task/find}]]/'+id
        })
    }
</script>
</body>
</html>